<template>
  <div>
    <setForm :visible="dialogVisible" @dialog="dialog"></setForm>
    <div class="nav">
      <breadcrumb :list="navList"></breadcrumb>
      <el-button type="primary" icon="el-icon-s-flag" @click="dialog()"
        >自定义表单</el-button
      >
    </div>
    <transition name="el-zoom-in-top">
      <div class="transition-box">
        <div class="fromDiv">
          <div class="fromCon">
            <!-- <h1>添加党组织</h1> -->
            <el-form ref="form" :model="form" label-width="120px">
              <el-col :span="18">
                <el-form-item label="全称">
                  <el-input
                    placeholder="请输入党组织全称"
                    v-model="form.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="简称">
                  <el-input
                    placeholder="请输入党组织简称"
                    v-model="form.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="组织类型">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="党委" value="shanghai"></el-option>
                    <el-option label="党总支" value="beijing"></el-option>
                    <el-option label="党支部" value="beijing"></el-option>
                    <el-option label="联合党支部" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="组织书记">
                  <el-input
                    placeholder="请输入组织书记"
                    v-model="form.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="联系人">
                  <el-input
                    placeholder="请输入联系人"
                    v-model="form.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="附件">
                  <Intercep
                    :fileList="form.fileList"
                    :multiple="false"
                    :fixedNumber="[5, 7]"
                    :width="100"
                    :height="140"
                    :initUrl="form.userPic"
                    @backcall="fileListFn"
                    :targetUrl="uploadFileUrl"
                  ></Intercep>
                  <!-- <p class="head-img">头像上传</p> -->
                  <!-- :fixedNumber="[5, 7]"  一寸 -->
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="文件">
                  <uploadFile
                    :fileList="form.fileList"
                    accept="doc,docx,pdf,xls,xlsx"
                    isDownLoad
                    theme="text"
                    @backcall="uploadBackCall($event, 'form')"
                    :limit="1"
                  >
                    <span class="tit" slot="slot">
                      上传文件类型 doc,docx,ppt,pptx,xls,xlsx,pdf
                      ，单个文件应小于20M，且仅能上传1份
                    </span>
                  </uploadFile>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="联系电话">
                  <el-input
                    placeholder="请输入联系电话"
                    v-model="form.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="排序序号">
                  <el-input
                    placeholder="请输入联系电话"
                    v-model="form.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="建立党组织日期">
                  <el-date-picker
                    v-model="form.date1"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit"
                    >立即创建</el-button
                  >
                  <el-button>取消</el-button>
                </el-form-item>
              </el-col>
              <p style="clear:both"></p>
            </el-form>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import setForm from "@/components/publicComponents/DIYform/setForm.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import Intercep from "@/components/upload/intercep.vue";
import uploadLoadApi from "@/api/uploadFile";
import uploadFile from "@/components/upload/uploadFile";

export default {
  name: "index",
  components: {
    setForm,
    breadcrumb,
    Intercep,
    uploadFile
  },
  data() {
    return {
      dialogVisible: false,
      uploadFileUrl: uploadLoadApi.uploadFile, //上传图片地址

      navList: [
        {
          name: "基础数据表格",
          type: false,
          url: ""
        },
        {
          name: "新增基础表单页",
          type: true,
          url: ""
        }
      ],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        fileList: [],
        fileName: "",
        userPic: "",
        fileList1: "",
        fileList2: ""
      }
    };
  },
  mounted() {},
  methods: {
    dialog() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 头像上传回调函数
    fileListFn(url) {
      console.log("--upload", url);
      this.form.userPic = url;
    },
    // 上传决议或通知书
    uploadBackCall(file, type, idx) {
      switch (type) {
        case "form":
          console.log("--file2", file);
          this.form.fileName = file.name;
          this.form.fileList = file;
          this.$refs.form.clearValidate("fileList");
          break;
        case "form4":
          break;
      }
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped>
.el-icon-s-flag {
  text-align: right;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
}</style
>>
